<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	
</head>
<body class="body">
	<jsp:include page="include/head.jsp">
		<jsp:param value="${ep}" name="ep"/>
	</jsp:include>
	<c:choose>
		<c:when test="${param.code == '1003' }">
			
			<script type="text/javascript">
				$(document).ready(function(){
					alert("修改目标成功！");
				});
			</script>
		</c:when>
		<c:when test="${param.code == '1004' }">
			
			<script type="text/javascript">
				$(document).ready(function(){
					alert("修改任务成功！");
				});
			</script>
		</c:when>
		<c:when test="${param.code == '1005' }">
			
			<script type="text/javascript">
				$(document).ready(function(){
					alert("删除任务成功！");
				});
			</script>
		</c:when>
		<c:when test="${param.code == '1006' }">
			
			<script type="text/javascript">
				$(document).ready(function(){
					alert("添加任务成功！");
				});
			</script>
		</c:when>
	</c:choose>
	<div class="container">
	  <div class="row">
		<div class="span3">
			<div style="padding: 8px 0;" class="well">
				<jsp:include page="include/nav.jsp">
					<jsp:param value="${ep}" name="ep"/>
					<jsp:param value="goal" name="tag"/>
				</jsp:include>
			</div>
		</div>
		<div class="span9">
			
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0;margin-top:15px">
				<li class="active">
					<a href="#"><i class="icon-th"></i>${gogal.name}</a>
				</li>
				<li style="float:right">
					<i class="icon-edit"></i><a href="goal.jspx?m=editGogal&gogalId=${gogal.id}" class="link-black">编辑</a>
				</li>
			</ul>
			<div class="wall">
				<p>${gogal.desc}</p>
				<input id="gogalId" type="hidden" name="gogalId" value="${gogal.id}">
				<div class="progress ${gogal.rate == 100 ? 'progress-success':'progress-danger'} mygogal">
					<div class="bar" style="width: ${gogal.rate}%;">${gogal.rate == 0 ? '':'总完成度'}${gogal.rate == 0 ? '':gogal.rate}${gogal.rate == 0 ? '':'%'}</div>
				</div>
				<span style="float:right;margin:0 30px;">创建时间：${gogal.createtime }</span><br>
				<hr style="margin:10px 0;">
				<div class="page-header">
					<a href="task.jspx?gogalId=${gogal.id}&m=newTask" class="btn btn-success"><i class="icon-plus icon-white"></i>添加新任务</a>
				</div>

				<dl>
					<c:if test="${fn:length(taskList) == 0 }">
						<dt><i class="icon-bookmark"></i>没有任务</dt>
					</c:if>
					<c:forEach items="${taskList}" var="task">
	        			<dt>
	        				<i class="icon-bookmark"></i><a href="task.jspx?taskId=${task.id}&m=editTask&gogalId=${gogal.id}">${task.name}</a>&nbsp;&nbsp;&nbsp;[${task.e.name}]
	        				<div style="float:right;">
								<i class="icon-edit"></i><a href="task.jspx?taskId=${task.id}&m=editTask&gogalId=${gogal.id}" class="link-black">编辑</a>
								<i class="icon-trash"></i><a href="task.jspx?taskId=${task.id}&m=delTask&gogalId=${gogal.id}" class="link-black">删除</a>
								
							</div>
	        			</dt>
	        			<dd style="margin:10px;">${task.desc}.</dd>
	        			<div class="progress ${task.rate == 100 ? 'progress-success':''} myproress">
						  <div class="bar" style="width:${task.rate}%;" id="${task.id}">${task.rate == 0 ? '':task.rate}${task.rate == 0 ? '':'%'}</div>
						</div>
					</c:forEach>
      			</dl>
			</div>
			
		</div>
	  </div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			function mousePosition(ev){
			    if(ev.pageX){
			        return ev.pageX;
			    }
			    return ev.clientX + document.body.scrollLeft - document.body.clientLeft;
			}
			$(".myproress").click(function(e) {
				var mouseX = mousePosition(e);
				var thisX=$(this).offset().left;
				var width=$(this).width();
				var rate =  Math.round(((mouseX - thisX)*100)/width);
				var id=$(this).children(".bar").attr("id");
				var gogalId=$("#gogalId").val();
				$.get("gogal.jspx?_m=setNewRate&id="+id+"&rate="+rate+"&gogalId="+gogalId,function(data){
					$(data).each(function(){
						$(".mygogal .bar").attr("style","width:"+this.rate+"%;").text(this.rate+"%");
						if(this.rate==100) {
							$(".mygogal").addClass("progress-success");
						} else {
							$(".mygogal").removeClass("progress-success");
						}
					});
				});
				$(this).children(".bar").attr("style","width:"+rate+"%;").text(rate+"%");
				if(rate==100) {
					$(this).addClass("progress-success");
				} else {
					$(this).removeClass("progress-success");
				}
			});
		});
	</script>
</body></html>